﻿@using Model.WXshopBuiness.Enum
@using Model.WXshopBuiness
@using Xproject.Util
@using Model.WXshopBuiness
@{

    Layout = "~/Views/Shared/_JSWeiXinPay.cshtml";

    List<string> Images = (List<string>)ViewData["ScrollImages"];
    List<ProductContents> contents = (List<ProductContents>)ViewData["contents"];
    UserProductKanJia KJia = (UserProductKanJia)ViewData["kjInfo"];
    List<PromotionsKanJiaDetail> alreadKanJiaInfos = (List<PromotionsKanJiaDetail>)ViewData["alreadKanJiaInfos"];
    string Domain = CommonHelper.GetAppSettings("Domain");
    decimal alreadrate = 100 * (KJia.AleradKanJiaMoney / KJia.MaxKanJiaMoney);
    string nowTime = DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss");
    bool isFoucs = (bool)ViewBag.IsFoucs;
}
@model WXProduct

<link href="~/Content/bootstrap.css" rel="stylesheet" />

<link href="~/Content/css/shop/home.css" rel="stylesheet" />
<link href="~/Content/css/Promotions/kanjia.css" rel="stylesheet" />
<link href="http://at.alicdn.com/t/font_dlhgabo730hk6gvi.css" rel="stylesheet" type="text/css" />

<script src="~/Scripts/shop/jquery.min.js" type="text/javascript"></script>

<script src="~/Scripts/shop/index.js"></script>
<script src="~/Scripts/jQuery.textSlider.js"></script>
<script src="~/Scripts/shop/timedown.js"></script>
<script type="text/javascript">
          shareCustomerData = {
              title: "亲，我好想要这个 @(@Model.ProductName)",
            link: window.location.href+"&zxpID="+"@(ViewBag.zxUserId)", // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: '@(Model.Domain+Model.ThumbnailUrl1)', // 分享图标
            desc: '快看看你能帮我节约一下粮食不'
        }


        function KanJia(KanJiaID) {
                $.ajax({
            type: "POST",
            url: '@(Domain)/Promotions/DoKanJia',
            data: {KanJiaID: KanJiaID },
            cache: false,

            success: function (data) {
                if (data.Success == true) {
                    $("#kanjiamoney").text(data.Data);
                    $(".chop-price").fadeIn();
                    var old = Number($("#AleradKanJiaMoney").text());
                    old = old + Number(data.Data);
                    $("#AleradKanJiaMoney").text(old);
                    $("#AleradKanJiaMoneytitle").text(old);
                    $("#friendKanJiaList").append("<li>我在" + "@(nowTime)" + "帮忙砍价" + "<span style='color:red'>"+ data.Data+"</span>元</li>");
                } else {
                    $("#kanjiamoney").text("");
                    layer.open({
                        content: data.Data
                        , skin: 'msg'
                        , time: 2 //2秒后自动关闭
                    });
                }


            },
            error: function (data) {
                alert(data);
            }
        });

        }
        $(document).ready(function () {
            $("#scrollDiv").textSlider({ line: 1, speed: 500, timer: 3000 });
            $(".chop-price .close , .chop-price .know").click(function () {
                $(".chop-layer").fadeOut();
            })
        });

</script>
<script type="text/javascript">
    !function (J) { function H() { var d = E.getBoundingClientRect().width; var e = (d / 7.5 > 100 * B ? 100 * B : (d / 7.5 < 42 ? 42 : d / 7.5)); E.style.fontSize = e + "px", J.rem = e } var G, F = J.document, E = F.documentElement, D = F.querySelector('meta[name="viewport"]'), B = 0, A = 0; if (D) { var y = D.getAttribute("content").match(/initial\-scale=([\d\.]+)/); y && (A = parseFloat(y[1]), B = parseInt(1 / A)) } if (!B && !A) { var u = (J.navigator.appVersion.match(/android/gi), J.navigator.appVersion.match(/iphone/gi)), t = J.devicePixelRatio; B = u ? t >= 3 && (!B || B >= 3) ? 3 : t >= 2 && (!B || B >= 2) ? 2 : 1 : 1, A = 1 / B } if (E.setAttribute("data-dpr", B), !D) { if (D = F.createElement("meta"), D.setAttribute("name", "viewport"), D.setAttribute("content", "initial-scale=" + A + ", maximum-scale=" + A + ", minimum-scale=" + A + ", user-scalable=no"), E.firstElementChild) { E.firstElementChild.appendChild(D) } else { var s = F.createElement("div"); s.appendChild(D), F.write(s.innerHTML) } } J.addEventListener("resize", function () { clearTimeout(G), G = setTimeout(H, 300) }, !1), J.addEventListener("pageshow", function (b) { b.persisted && (clearTimeout(G), G = setTimeout(H, 300)) }, !1), H() }(window);
    if (typeof (M) == 'undefined' || !M) {
        window.M = {};
    }
</script>
<script>
        //倒计时
        $(function () {
            $('#countdown_dashboard').countDown({
                targetDate: {
                    'day': @KJia.DeadLineTime.Day,
                    'month': @KJia.DeadLineTime.Month,
                    'year': @KJia.DeadLineTime.Year,
                    'hour': @KJia.DeadLineTime.Hour,
                    'min': @KJia.DeadLineTime.Hour,
                    'sec': @KJia.DeadLineTime.Second
                }
            });
        });
        function animate() {
            $(" .charts").each(function (i, item) {
                var a = parseInt($(this).attr("w"));
                $(item).animate({
                    width: a + "%"
                }, 1000);
            });
        }
        animate();

        function AddFoucs() {
            $("#float-bg").show();
        }
        $(function () {
            //使用方法名字执行方法 setTimeout只执行一次
            var t1 = window.setTimeout(fadeDiv, 4000);
            function fadeDiv() {
                $("#float-bg").fadeOut();
                window.clearTimeout(t1);//去掉定时器 
            }
        });
</script>


<style>
    .item img {
        width: 100%;
        height: 250px;
    }

    .carousel-inner > .item > a > img {
        display: block;
        max-width: 100%;
        line-height: 1;
    }



    .lun {
        background: #fff;
        margin-top: 1.143em;
        margin-bottom: 1em;
    }

        .lun ul, .lun li {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .lun li {
            border-bottom: 1px solid #ececec;
            margin-top: 1em;
            padding-bottom: 1em;
        }

    .touxi {
        overflow: hidden;
        margin-bottom: 8px;
    }

        .touxi img {
            display: block;
            float: left;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-left: 0.857em;
        }

    .attrparam {
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        width: 100%;
        border-collapse: collapse;
    }

        .attrparam td, .attrparam th {
            font-size: 1em;
            border: 1px solid #d2d8c1;
            padding: 3px 7px 2px 7px;
            width: 50%;
        }

        .attrparam th {
            font-size: 1.1em;
            text-align: left;
            padding-top: 5px;
            padding-bottom: 4px;
            background-color: #A7C942;
            color: #ffffff;
        }

        .attrparam tr.alt td {
            color: #000000;
            background-color: #EAF2D3;
        }
</style>
<style type="text/css">
    ul, li {
        margin: 0;
        padding: 0
    }

    #scrollDiv {
        overflow: auto
    }

    .scrollText {
        width: 100%;
        height: 150px;
        min-height: 15px;
        line-height: 15px;
        float: left;
        overflow: hidden
    }

        .scrollText li {
            height: 25px;
            padding-left: 3px;
        }

    .up {
        margin-left: 310px;
        width: 50px;
        height: 50px;
        background: #F90
    }

    .down {
        margin: 0 0 0 310px;
        zoom: 1;
        width: 50px;
        height: 50px;
        background: #960
    }
    .float-bg {
        width: 100%;
        height: 50%;
        background-color: #fff;
        opacity: .9;
        filter: alpha(opacity=1);
        position: fixed;
        left: 0;
        top: 50%;
        z-index: 1100;
    }

        .float-bg img {
            position: absolute;
            top: 60%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
</style>


@if (!isFoucs)
{
    <div class="float-bg" id="float-bg">
        <p style="font-size:1.8em;color:blue;">您还没有关注我们</p>
        <p style="font-size:1.8em;color:blue;">识别下面二维码关注康道优选，给您更多服务！</p>
        <img src="~/Content/Image/gzh.jpg" style="height:60%;width:60%" />
    </div>
}


<div class="banner">
    <img src="~/Content/Image/Promotions/KanJia/banner.jpg" />
</div>
<div class="container">
    <div class="container-title">
        <div class="container-bg">
            <div id="countdown_dashboard">
                <div class="dash days_dash">
                    <div class="digit">
                        <div class="top"></div>
                        <div class="bottom"></div>
                    </div>
                    <div class="digit">
                        <div class="top"></div>
                        <div class="bottom"></div>
                    </div>
                </div>
                <div class="dash item">天</div>
                <div class="dash hours_dash">
                    <div class="digit">
                        <div class="top"></div>
                        <div class="bottom"></div>
                    </div>
                    <div class="digit">
                        <div class="top"></div>
                        <div class="bottom"></div>
                    </div>
                </div>
                <div class="dash item">时</div>
                <div class="dash minutes_dash">
                    <div class="digit">
                        <div class="top"></div>
                        <div class="bottom"></div>
                    </div>
                    <div class="digit">
                        <div class="top"></div>
                        <div class="bottom"></div>
                    </div>
                </div>
                <div class="dash item">分</div>
                <div class="dash seconds_dash">
                    <div class="digit">
                        <div class="top"></div>
                        <div class="bottom"></div>
                    </div>
                    <div class="digit orange">
                        <div class="top"></div>
                        <div class="bottom"></div>
                    </div>
                </div>
                <div class="dash item">秒</div>
            </div>
        </div>
    </div>
    <div class="wrapper">
        <div class="wrapper-text">
            <p>亲：已经有 <span>@KJia.AlreadKanJiaCount</span> 位亲友帮助 @KJia.UserName 砍价啦</p>
            <p>当前已砍价<span id="AleradKanJiaMoneytitle">@KJia.AleradKanJiaMoney 元</span> </p>
        </div>
        <div class="votebox">
            <dl class="barbox">
                <dd class="barline">
                    <div w="50" style="width:@alreadrate%;" class="charts">
                        <img src="~/Content/Image/Promotions/KanJia/yuan.png" />
                        <div class="price" style="min-width: 1.3rem;">￥<label id="AleradKanJiaMoney">@KJia.AleradKanJiaMoney</label><i></i></div>
                    </div>
                </dd>
            </dl>
        </div>
    </div>
    <div class="price-box">
        <div class="price-box-left">原价：<span>¥@(Model.SalePriceStr)</span></div>
        <div class="price-box-right">底价：<span>¥@((Model.SalePrice - KJia.MaxKanJiaMoney).ToString("#0.00"))</span></div>
    </div>
    <div class="price-btn">
        @if (isFoucs)
    {
        <a href="@(Domain)/shop/ProductDetail?productId=@Model.ProductID" class="left">我也想要</a>
}
else
{
        <a href="#" onclick="AddFoucs();" class="join">我也想要</a>
}
        <a href="#" class="right" onclick="KanJia('@KJia.KanJiaID');">帮他砍价</a>
    </div>
</div>
<div class="container">
    <div class="container-title">
        <div class="container-bg">砍价商品</div>
    </div>
    <div class="container-product">
        <div class="product-pic"><img src="@(Model.Domain+Model.ThumbnailUrl1)" /></div>
        <div class="product-text" style="display: inline-block;width: 65%;">
            <a href="@(Domain)/shop/ProductDetail?productId=@Model.ProductID">
                <p style="font-weight:bolder">@Model.ProductName</p>
                <p>@Model.ShortDesc</p>
                <p>售价：<span style="color:red;">@(Model.SalePriceStr)元 </span></p>
            </a>
        </div>
    </div>
</div>

<!--top-->
<div class="top_c">
    <a href="~/shop/index" class="iconfont icon-jiantou-copy-copy"></a>
    <p class="titi">@KJia.KanJiaDesc</p>
</div>

<!--banner-->
<!--tou-->
<div class="container" style="margin-left:1px;margin-right:1px;padding-left:1px;padding-right:1px;">
    <div class="container-title">
        <div class="container-bg">砍价排行</div>
    </div>
    <div id="scrollDiv">
        <div class="scrollText">
            <ul id="friendKanJiaList">
                @foreach (PromotionsKanJiaDetail t in alreadKanJiaInfos)
                {
                    <li><span>@t.UserName </span>在@(t.CreateTime.ToString("yyyy-MM-dd HH:mm:ss")) 帮忙砍价<span style="color:red">@(t.KanJiaMoney)</span>元</li>
                }
            </ul>

        </div>
    </div>
</div>




<div class="container">
    <div class="container-title">
        <div class="container-bg">商品详情</div>
    </div>
    <div class="tab-content">
        <div id="tab-1" class="tab-pane active">
            <div class="xiang" style="background:none">
                <div class="container">
                    @foreach (ProductContents pc in contents)
                    {
                        <div class="row">
                            <div class="col-lg-12">
                                <img src="@(pc.Domain+pc.ProductImage)">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12">
                                <p>@pc.ProductContent</p>
                            </div>
                        </div>
                    }
                </div>
            </div>
        </div>


    </div>
</div>

<div class="container">
    <div class="container-title">
        <div class="container-bg">活动规则</div>
    </div>
    <div class="container-rule">
        <p>1.活动时间：即日起截止至@(KJia.DeadLineTime.Year)年@(KJia.DeadLineTime.Month)月@(KJia.DeadLineTime.Day)日</p>
        <p>2.活动产品：<span style="font-weight:600">原价@(Model.SalePriceStr)元@(Model.ProductName)</span>，每人仅限1份</p>
        <P>3.可砍到最低价购买，砍价过程中也可随时联系商家购买</P>
        <p>4.商品限量100件，先下单付款者先得，售完即止</p>
        <p>5.所有解释权归商家所有</p>
    </div>
</div>

<div class="chop-layer chop-price">
    <div class="chop-box">
        <div class="success mt">
            <div class="close">X</div>
            <div class="success-title"><img src="~/Content/Image/Promotions/KanJia/chop.png" /></div>
            <div class="success-con">
                恭喜您已成功帮好友<br />砍掉<span id="kanjiamoney"></span>元
            </div>
            <div class="chop-btn">
                <a href="javascript:;" class="know">知道了</a>
                @if (isFoucs)
                {
                    <a href="@(Domain)/shop/ProductDetail?productId=@Model.ProductID" class="join">发起砍价</a>
                }
                else
                {
                    <a href="#" onclick="AddFoucs();" class="join">发起砍价</a>
                }

            </div>
        </div>
    </div>
</div>
<!--footer-->
